import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import * as ScopedNotificationExamples from './base/example';

<div className="lead doc">
  Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(ScopedNotificationExamples.examples, 'dark-theme')}
</CodeView>

## About Scoped Notifications

### Accessibility

Scoped notifications contain `role="status"` on the container to signal to the browser to send an accessible status event to assistive technology. The assistive technology then notifies the user.

## Base

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.default)}
</CodeView>

### States

#### Informational

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.states, 'info')}
</CodeView>

#### Success

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.states, 'success')}
</CodeView>

#### Warning

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.states, 'warning')}
</CodeView>

#### Error

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.states, 'error')}
</CodeView>

### Examples

Informational Notifications default to the dark theme. For light, use the class `slds-scoped-notification_light` instead of `slds-theme_info`. An additional class, `slds-scoped-notification_dark` is also available for the dark theme to more easily toggle between them.

#### Light Theme

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.examples, 'light-theme')}
</CodeView>

#### Dark Theme

<CodeView>
  {getDisplayElementById(ScopedNotificationExamples.examples, 'dark-theme')}
</CodeView>
